<template>
	<view class="flex flex_wrap padding-top-10">
		<view :style="{width:cWidth+'px',height:cWidth+'px'}" v-for="(v,i) in dataList" :key="i">
			<view class="img-add margin-right-10" style="margin-right: 10px;"
				v-if="['jpg','jpeg', 'png', 'gif'].includes(v.c_file_ext)">
				<image @click="preview(v,i)" :src="v.url" :style="{width:(cWidth-10)+'px',height:(cWidth-10)+'px'}"
					mode="scaleToFill" style="border-radius: 10rpx"></image>
				<view @click="preview(v,i)" class="file-name" v-if="v.c_type=='file'">{{v.file}}</view>
				<view class="del-box" @click="delImg(i)" v-if="!props.disabled"><eui-uicons color="#fff"
						type="closeempty" size="20" /></view>

				<view class="file-picker__progress" v-if="(v.progress && v.progress !== 100) ||v.progress===0 ">
					<progress class="file-picker__progress-item" :percent="v.progress === -1?0:v.progress"
						stroke-width="4"
						:activeColor="themeStore.theme=='theme-blue'?'rgba(2, 183, 230, 1)':'#FF6430'" />
				</view>
				<view class="file-picker__mask" v-if="v.errMsg" @click="uploadItemFile(i,v)">
					点击重试
				</view>
			</view>
			<view class="img-add margin-right-10" style="margin-right: 10px;"
				v-if="!['jpg','jpeg', 'png', 'gif'].includes(v.c_file_ext)">
				<image @click="preview(v,i)" :src="getFileExt(v.c_file_ext)"
					:style="{width:(cWidth-10)+'px',height:(cWidth-10)+'px'}" mode="scaleToFill"
					style="border-radius: 10rpx"></image>
				<view @click="preview(v,i)" class="file-name" v-if="v.c_type=='file'">{{v.file}}</view>
				<view class="del-box" @click="delImg(i)" v-if="!props.disabled"><eui-uicons color="#fff"
						type="closeempty" size="20" /></view>

				<view class="file-picker__progress" v-if="(v.progress && v.progress !== 100) ||v.progress===0 ">
					<progress class="file-picker__progress-item" :percent="v.progress === -1?0:v.progress"
						stroke-width="4"
						:activeColor="themeStore.theme=='theme-blue'?'rgba(2, 183, 230, 1)':'#FF6430'" />
				</view>
				<view class="file-picker__mask" v-if="v.errMsg" @click="uploadItemFile(i,v)">
					点击重试
				</view>
			</view>
		</view>
		<!-- <view :style="{width:cWidth+'px',height:cWidth+'px'}">
			<view class="img-add margin-right-10" style="margin-right: 10px;">
				<image src="../../../static/img/avatar_male.png" :style="{width:(cWidth-7)+'px',height:(cWidth-7)+'px'}"
					mode="scaleToFill" style="border-radius: 10rpx"></image>
				<view class="file-name">3eeeeee</view>
				<view class="del-box" v-if="!props.disabled"><eui-uicons color="#fff" type="closeempty" size="20" />
				</view>
				<view class="file-picker__progress">
					<progress class="file-picker__progress-item" percent="10" stroke-width="4"
						:activeColor="themeStore.theme=='theme-blue'?'#000':'#FF6430'" />
				</view>
				<view class="file-picker__mask">
					点击重试
				</view>
			</view>
		</view> -->
		<view :style="{width:cWidth+'px',height:cWidth+'px'}" @click="selFile">
			<view class="img-add m-image-btn margin-right-10" :style="{width:(cWidth-10)+'px',height:(cWidth-10)+'px'}"
				style="margin-right: 10px;">
				<!-- <view class="m-image-view" /> -->
				<view class="iconfont icon-shangchuan1"></view>
				<!-- <eui-uicons type="plusempty" size="58" color="#000"></eui-uicons> -->
				<!-- <text class="m-image-text">上传附件</text> -->
			</view>
		</view>
	</view>
</template>
<script setup lang="ts">
	import { ref, watchEffect } from 'vue';
	import { onLoad } from '@dcloudio/uni-app';
	import service from '@/common/service';
	import Guid from '@/common/guid';
	import { useMainStore } from '@/store/modules/store';
	import { useLoginStore } from '@/store/modules/useLoginStore';
	import { useThemeStore } from '../../../store/themeStore';
	const mainStore = useMainStore();
	const LoginStore = useLoginStore();
	const themeStore = useThemeStore(); // 主题

	const props = defineProps<{
		loadUrl ?: String;
		loadCount ?: String;
		loadTotalCount ?: String;
		value ?: [Object];
		modelValue ?: [Object];
		disabled ?: Boolean;
		fileType ?: [Array];
		readonly ?: Boolean;
		isFiles ?: String;
		imgSize ?: String;
		async ?: String;
	}>();
	const emit = defineEmits(["result", "delImg"]);
	watchEffect(() => {
		console.log("props.modelValue: " + JSON.stringify(props.modelValue));
		dataList.value = props.modelValue || [];
	});

	const cWidth = ref((uni.getSystemInfoSync().windowWidth - 38) / 4);
	const canUpCount = ref(props.loadCount);
	const file_size = ref([]);
	const dataList = ref(props.modelValue);
	const loacImgSize = ref(props.imgSize ? props.imgSize : 2);
	const uniIdToken = ref(JSON.parse(uni.getStorageSync('uniIdToken')));


	const selFile = () => {
		if (!props.loadUrl) {
			service.enjoyShowToast("你没有传入上传url,请检查！")
			return;
		}
		if (Number(props.loadTotalCount - props.modelValue.length) < Number(props.loadCount)) {
			canUpCount.value = Number(props.loadTotalCount - props.modelValue.length);
		}
		let titleList = [];
		if (props.fileType && props.fileType.length > 0) {
			titleList = props.fileType;
			showSheetAction();
		} else {
			uni.getSystemInfo({
				success: function (res) {
					if (res.platform == 'ios') {
						titleList = ['拍照上传', '从相册中选择'];
					} else {
						if (props.isFiles && props.isFiles == '是') {
							titleList = ['拍照上传', '从相册中选择', '选择文件'];
						} else {
							titleList = ['拍照上传', '从相册中选择'];
						}
					};
					showSheetAction();
				}
			})
		}
		function showSheetAction() {
			uni.showActionSheet({
				itemList: titleList,
				success: function (res) {
					if (res.tapIndex == 0) {
						chooseCameraImage()
					} else if (res.tapIndex == 1) {
						chooseAlbumImage()
					} else {
						chooseAndroidFile()
					}
				},
			})
		}

	}
	// 拍照上传
	const chooseCameraImage = () => {
		uni.chooseImage({
			count: Number(canUpCount.value),
			sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
			sourceType: ['camera'], //从相册选择
			success: function (res) {
				console.log("res: " + JSON.stringify(res));
				if (res) {
					if (res.tempFiles) {
						file_size.value = res.tempFiles;
						for (let item of res.tempFiles) {
							if (item.size > (loacImgSize.value * 1024 * 1024)) {
								service.enjoyShowToast(`图片不能大于${loacImgSize.value}M`)
								return false;
							}
							if (item.type && props.fileType && props.fileType.length > 0) {
								let r = props.fileType.some(v => {
									let type = item.type.split('/');
									if (type.length)
										return (v === type[1]);
								});
								if (!r) {
									service.enjoyShowToast(`只允许上传${props.fileType}的类型`)
									return false;
								}
							}
						}
					}
					let startIndex = dataList.value.length;
					dataList.value = [...dataList.value, ...res.tempFilePaths];
					changeImgArr(startIndex);
					if (props.async && props.async == '是') {
						//直接上传
						asyncUpload(startIndex);
					}
				}
			}
		});
	}
	// 从相册中选择
	const chooseAlbumImage = () => {
		uni.chooseImage({
			count: Number(canUpCount.value),
			sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
			sourceType: ['album'], //从相册选择
			success: function (res) {
				console.log("res: " + JSON.stringify(res));
				if (res) {
					if (res.tempFiles) {
						file_size.value = res.tempFiles;
						for (let item of res.tempFiles) {
							if (item.size > (loacImgSize.value * 1024 * 1024)) {
								service.enjoyShowToast(`图片不能大于${loacImgSize.value}M`)
								return false;
							}
							if (item.type && props.fileType && props.fileType.length > 0) {
								let r = props.fileType.some(v => {
									let type = item.type.split('/');
									if (type.length)
										return (v === type[1]);
								});
								if (!r) {
									service.enjoyShowToast(`只允许上传${props.fileType}的类型`)
									return false;
								}
							}
						}
					}
					let startIndex = dataList.value.length;
					dataList.value = [...dataList.value, ...res.tempFilePaths];
					changeImgArr(startIndex);
					if (props.async && props.async == '是') {
						//直接上传
						asyncUpload(startIndex);
					}
				}
			}
		});
	}
	const chooseAndroidFile = () => {
		// #ifdef APP-PLUS
		if (plus.os.name.toLowerCase() != "android") {
			service.enjoyShowToast("仅支持Android平台！")
			return false
		}
		// java 代码来自 http://www.cnblogs.com/panhouye/archive/2017/04/23/6751710.html
		let main = plus.android.runtimeMainActivity();
		let Intent = plus.android.importClass("android.content.Intent");
		let fileIntent = new Intent(Intent.ACTION_GET_CONTENT)
		//fileIntent.setType(“image/*”);//选择图片
		//fileIntent.setType(“audio/*”); //选择音频
		//fileIntent.setType(“video/*”); //选择视频 （mp4 3gp 是android支持的视频格式）
		//fileIntent.setType(“video/*;image/*”);//同时选择视频和图片
		fileIntent.setType("*/*"); //无类型限制
		fileIntent.addCategory(Intent.CATEGORY_OPENABLE);
		main.startActivityForResult(fileIntent, 1);
		// 获取回调
		main.onActivityResult = function (requestCode, resultCode, data) {
			let Activity = plus.android.importClass("android.app.Activity");
			let ContentUris = plus.android.importClass("android.content.ContentUris");
			let Cursor = plus.android.importClass("android.database.Cursor");
			let Uri = plus.android.importClass("android.net.Uri");
			let Build = plus.android.importClass("android.os.Build");
			let Environment = plus.android.importClass("android.os.Environment");
			let DocumentsContract = plus.android.importClass("android.provider.DocumentsContract");
			let MediaStore = plus.android.importClass("android.provider.MediaStore");
			// 给系统导入 contentResolver
			let contentResolver = main.getContentResolver()
			plus.android.importClass(contentResolver);
			// 返回路径
			let path = '';
			if (resultCode == Activity.RESULT_OK) {
				let uri = data.getData()
				if ("file" == uri.getScheme().toLowerCase()) { //使用第三方应用打开
					path = uri.getPath();
					return;
				}
				if (Build.VERSION.SDK_INT > Build.VERSION_CODES.KITKAT) { //4.4以后
					path = getPath(this, uri);
				} else { //4.4以下下系统调用方法
					path = getRealPathFromURI(uri)
				}
				let type2 = path.substring(path.lastIndexOf('.') + 1, path.length);
				type2 = type2.toLowerCase();
				uni.getFileInfo({
					filePath: path,
					success: (res) => {
						if (res.size > (loacImgSize.value * 1024 * 1024)) {
							service.enjoyShowToast(`图片不能大于${loacImgSize.value}M`)
							return false;
						}
						// 先判断是不是图片类型的
						let startIndex = dataList.value.length;
						dataList.value.push({
							id: dataList.value.length,
							upload: false,
							url: 'file://' + path,
							result: null,
							c_type: ['jpeg', 'jpg', 'png'].includes(type2) ? type2 : 'file',
							c_file_size: res.size,
							c_file_ext: ['jpeg', 'jpg', 'png'].includes(type2) ? type2 : 'file',
							file: path.substr(path.lastIndexOf('/') + 1),
							c_guid: Guid.NewGuid().ToString(),
						})
						changeImgArr(startIndex);
						if (props.async && props.async == '是') {
							asyncUpload(startIndex);
						}
					}
				})
			}
			// 4.4 以上 从Uri 获取文件绝对路径
			function getPath(context, uri) {
				let isKitKat = Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT;
				let scheme = uri.getScheme().toLowerCase()
				if (isKitKat && DocumentsContract.isDocumentUri(context, uri)) {
					// ExternalStorageProvider
					if (isExternalStorageDocument(uri)) {
						let docId = DocumentsContract.getDocumentId(uri);
						let split = docId.split(":");
						let type = split[0];
						// 如果是手机内部存储
						if ("primary" == type.toLowerCase()) {
							return Environment.getExternalStorageDirectory() + "/" + split[1];
						} else {
							return '/storage/' + type + "/" + split[1];
						}
					}
					// DownloadsProvider
					else if (isDownloadsDocument(uri)) {
						let id = DocumentsContract.getDocumentId(uri);
						let split = id.split(":");
						return split[1]
						// console.log(id)
						// let contentUri = ContentUris.withAppendedId(Uri.parse("content://downloads/public_downloads"), id);
						// return getDataColumn(context, contentUri, null, null);
					}
					// MediaProvider
					else if (isMediaDocument(uri)) {
						let docId = DocumentsContract.getDocumentId(uri);
						let split = docId.split(":");
						let type = split[0];
						let contentUri = null;
						if ("image" == type.toLowerCase()) {
							contentUri = MediaStore.Images.Media.EXTERNAL_CONTENT_URI;
						} else if ("video" == type.toLowerCase()) {
							contentUri = MediaStore.Video.Media.EXTERNAL_CONTENT_URI;
						} else if ("audio" == type.toLowerCase()) {
							contentUri = MediaStore.Audio.Media.EXTERNAL_CONTENT_URI;
						} else if ('document' == type.toLowerCase()) {
							contentUri = MediaStore.Files.getContentUri("external");
						}
						let selection = "_id=?";
						let selectionArgs = [split[1]];
						return getDataColumn(context, contentUri, selection, selectionArgs);
					}
				}
				// MediaStore (and general)
				else if ("content" == scheme) {
					return getDataColumn(context, uri, null, null);
				}
				// File
				else if ("file" == scheme) {
					return uri.getPath();
				}
			}
			// 4.4 以下 获取 绝对路径
			function getRealPathFromURI(uri) {
				let res = null
				let proj = [MediaStore.Images.Media.DATA]
				let cursor = contentResolver.query(uri, proj, null, null, null);
				if (null != cursor && cursor.moveToFirst()) {

					;
					let column_index = cursor.getColumnIndexOrThrow(MediaStore.Images.Media.DATA);
					res = cursor.getString(column_index);
					cursor.close();
				}
				return res;
			}
			// 通过uri 查找出绝对路径
			function getDataColumn(context, uri, selection, selectionArgs) {
				let cursor = null;
				let column = "_data";
				let projection = [column];
				// let contentResolver = context.getContentResolver()
				// plus.android.importClass(contentResolver);
				cursor = contentResolver.query(uri, projection, selection, selectionArgs, null);
				if (cursor != null && cursor.moveToFirst()) {
					let column_index = cursor.getColumnIndexOrThrow(column);
					return cursor.getString(column_index);
				}
			}
			function isExternalStorageDocument(uri) {
				return "com.android.externalstorage.documents" == uri.getAuthority() ? true : false
			}
			function isDownloadsDocument(uri) {
				return "com.android.providers.downloads.documents" == uri.getAuthority() ? true : false
			}
			function isMediaDocument(uri) {
				return "com.android.providers.media.documents" == uri.getAuthority() ? true : false
			}
		}
		// #endif
		// #ifndef APP-PLUS
		service.enjoyShowToast('仅支持Android平台')
		// #endif
	}
	const changeImgArr = index => {
		for (let i = index; i < dataList.value.length; i++) {
			let item = dataList.value[i];
			console.log(JSON.stringify(item))
			let size = 0;
			let fileSizeIndex = 0;
			if (dataList.value[i].c_file_size) {
				size = dataList.value[i].c_file_size
			} else if (file_size.value && file_size.value.length > 0) {
				size = file_size.value[fileSizeIndex].size
				++fileSizeIndex
			}
			if (!item.upload) {
				if (item.upload === false) {
					dataList.value[i].url = item.url;
				} else {
					const NewGuid = Guid.NewGuid().ToString()
					dataList.value[i] = {
						id: i,
						upload: false,
						url: item,
						c_file_ext: (item.slice(item.lastIndexOf('.') + 1)).toLowerCase(),
						result: null,
						file: item.substr(item.lastIndexOf('/') + 1),
						c_guid: NewGuid,
						c_imgGuid: NewGuid,
					}
				}
				emit('result', dataList.value[i], size);
			}
		}
	}
	// 上传
	const asyncUpload = (index) => {
		if (dataList.value.length) {
			for (let i = index; i < dataList.value.length; i++) {
				console.log(dataList.value[i])
				dataList.value[i].Guid = Guid.NewGuid().ToString();
				dataList.value[i].name = 'file';
				dataList.value[i].file = dataList.value[i].url.substr(dataList.value[i].url.lastIndexOf('/') + 1);
				dataList.value[i].uri = dataList.value[i].url;
				dataList.value[i].progress = 0;
				dataList.value[i].errMsg = '';
				let size = 0;
				let fileSizeIndex = 0;
				if (dataList.value[i].c_file_size) {
					size = dataList.value[i].c_file_size
				} else if (file_size.value && file_size.value.length > 0) {
					size = file_size.value[fileSizeIndex].size
					++fileSizeIndex
				}
				uploadFile(i, [dataList.value[i]], dataList.value[i].Guid, uploadRet => {
					console.log("uploadRet: " + JSON.stringify(uploadRet));
					if (uploadRet.Exception != null && uploadRet.Exception.HasException) {
						// service.enjoyShowToast(uploadRet[0].Exception.Message)
						service.enjoyShowToast('上传失败,请重试!')
						dataList.value[i]['UploadFailed'] = false;
						dataList.value[i].errMsg = uploadRet.Exception.Message;
					} else {
						dataList.value[i]['UploadFailed'] = true;
						dataList.value[i].errMsg = '';
						dataList.value[i].c_guid = uploadRet.ObjectData;
						emit('result', uploadRet, dataList.value[i], size);
					}
				}, err => {
					console.log("err: " + JSON.stringify(err));
					dataList.value[i].errMsg = err.statusCode;
					if (err.statusCode == 413) {
						service.enjoyShowToast('文件超大了!')
					}
				})
			}
		}
	}
	const uploadItemFile = (index, item) => {
		dataList.value[index].progress = 0;
		dataList.value[index].errMsg = '';
		uploadFile(index, [item], item.Guid, uploadRet => {
			console.log("uploadRet: " + JSON.stringify(uploadRet));
			if (uploadRet.Exception != null && uploadRet.Exception.HasException) {
				service.enjoyShowToast(uploadRet.Exception.Message)
				dataList.value[index]['UploadFailed'] = false;
				dataList.value[index].errMsg = uploadRet.Exception.Message;
			} else {
				dataList.value[index]['UploadFailed'] = true;
				dataList.value[index].errMsg = '';
				dataList.value[index].c_guid = uploadRet.ObjectData;
				emit('result', uploadRet, dataList.value[index], size);
			}
		}, err => {
			console.log("err: " + JSON.stringify(err));
			dataList.value[index].errMsg = err.statusCode;
			if (err.statusCode == 413) {
				service.enjoyShowToast('文件超大了!')
			}
		})
	}
	// 上传文件
	const uploadFile = (index, files, uploadKey, CallBack, ErrBack) => {
		console.log("files: " + JSON.stringify(files));
		if (files.length == 0) {
			service.enjoyShowToast('没有添加上传文件!')
			return false;
		}
		const uploadTask = uni.uploadFile({
			url: props.loadUrl + "/File/UploadFile",
			files: files,
			header: {
				'NoNi-UUPIG': uniIdToken.value + '|' + mainStore.loginInfo.sUser
			},
			formData: {
				uploadUserNo: mainStore.loginInfo.sUser,
				UniqueKey: uploadKey,
			},
			success: (uploadFileRes) => {
				if (uploadFileRes.statusCode == 200) {
					CallBack(JSON.parse(uploadFileRes.data))
				} else {
					ErrBack(uploadFileRes)
				}
			},
			fail: (err) => {
				ErrBack(err)
				dataList.value[index]['UploadFailed'] = false;
			},
		});
		uploadTask.onProgressUpdate((res) => {
			dataList.value[index].progress = res.progress;
		});
	}
	const preview = (url, index) => {
		// 预览图片
		console.log(url, index)
		if (!['jpg', 'jpeg', 'png', 'gif'].includes(url.c_file_ext)) {
			plus.runtime.openURL(url.url);
		} else {
			let list = [];
			list.push(url.url);
			for (let i = 0; i < dataList.value.length; i++) {
				if (['jpg', 'jpeg', 'png', 'gif'].includes(dataList.value[i].c_file_ext) && dataList.value[i].url != url.url) {
					list.push(dataList.value[i].url)
				}
			}
			uni.previewImage({
				urls: list
			});
		}
	}
	const delImg = i => {
		if (!props.disabled) {
			uni.showModal({
				title: '提示',
				content: '是否删除此文件？',
				success: function (res) {
					if (res.confirm) {
						emit("delImg", dataList.value[i], i);
						dataList.value.splice(i, 1);
					} else if (res.cancel) { }
				}
			});
		}
	}
	const getFileExt = fix => {
		console.log("fix: " + JSON.stringify(fix));
		if (fix) {
			if (fix == 'doc' || fix == 'docx') {
				return '../../../static/img/knowledge/docx.png';
			} else if (fix == 'txt') {
				return '../../../static/img/knowledge/txt.png';
			} else if (fix == 'ppt' || fix == 'pptx') {
				return '../../../static/img/knowledge/pptx.png';
			} else if (fix == 'jpg' || fix == 'png' || fix == 'bmp' || fix == 'jpeg' || fix == 'gif') {
				return '../../../static/img/knowledge/picture.png';
			} else if (fix == 'exe') {
				return '../../../static/img/knowledge/exe.png';
			} else if (fix == 'pdf') {
				return '../../../static/img/knowledge/pdf.png';
			} else if (fix == 'avi' || fix == 'wma' || fix == 'rmvb' || fix == 'mp4' || fix == 'mov' || fix ==
				'mpeg' || fix == 'flv' || fix == 'asf') {
				return '../../../static/img/knowledge/video.png';
			} else if (fix == 'html' || fix == 'xml') {
				return '../../../static/img/knowledge/html.png';
			} else if (fix == 'xls' || fix == 'xlsx' || 'xlsm') {
				return '../../../static/img/knowledge/xml.png';
			} else {
				return '../../../static/img/knowledge/spl.png';
			}
		} else {
			return '../../../static/img/knowledge/spl.png'
		}
	}
	onLoad(() => {
	})
</script>
<style lang="scss">
	@import '@/main.scss';

	.flex {
		display: flex;
	}

	.padding-right-10 {
		padding-right: 10px
	}

	.padding-top-10 {
		padding-top: 10px
	}

	.margin-right-10 {
		margin-right: 10px;
	}

	.img-add {
		width: 100%;
		height: 100%;
		position: relative;
	}

	.flex_wrap {
		flex-wrap: wrap;
	}

	.m-image-btn {
		background: rgba(238, 238, 238, 0.25);
		border-radius: 10rpx;
		border: 1px dashed #CCCCCC;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}

	.m-image-view {
		width: 40rpx;
		height: 37rpx;
		align-self: center;
		background-image: url(../../../static/img/imgUpload.png);
		background-size: 100% 100%;
	}

	.m-image-text {
		font-family: $uni-font-family;
		font-weight: $uni-font-weight-level1;
		font-size: $uni-font-size-level7;
		color: $uni-text-color-primary;
		line-height: 28rpx;
		text-align: right;
		font-style: normal;
		margin-top: 7rpx;
	}

	.del-box {
		width: 32rpx;
		height: 32rpx;
		background-color: rgba(51, 51, 51, 1);
		border-radius: 50%;
		position: absolute;
		top: -6px;
		right: 3px;
		display: flex;
		justify-content: center;
		align-items: center;
		z-index: 3;
	}

	.file-name {
		position: absolute;
		top: 0px;
		width: 90%;
		height: 100%;
		display: block;
		word-break: break-all;
		overflow: hidden;
		font-size: 12px;
		left: 0;
		right: 0;
		margin: auto;
		color: #333;
	}

	.file-picker__progress {
		position: absolute;
		bottom: 0;
		left: 0;
		right: 5px;
		z-index: 2;
	}

	.file-picker__progress-item {
		width: 100%;
	}

	.file-picker__mask {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		justify-content: center;
		align-items: center;
		position: absolute;
		border-radius: 10rpx;
		right: 5px;
		top: 0;
		bottom: 10px;
		left: 0;
		color: #fff;
		font-size: 12px;
		background-color: rgba(0, 0, 0, 0.4);
	}
	.iconfont {
		font-size: 44rpx;
		@include themeText("themeText");
	}
</style>